<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>经方查阅器</title>
  <!-- 新增网站图标 -->
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <!-- 引入图标 -->
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" />
  <script src="./data/fangJiDate.js"></script>
  <script src="./data/tiaoWenJieShiData.js"></script>
  <script src="./data/shangHanTiaoWenData.js"></script>
  <script src="./data/jinGuiTiaoWenData.js"></script>

  <script src="./libs/jquery-2.1.4.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> -->
  <script src="./libs/jqueryui-1.13.2.js"></script>
  <script src="./libs/template-web.js"></script>
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/media.css" />
</head>

<body id="app">
  <!-- 导航栏 -->
  <header>
    <!-- 版心 -->
    <!-- <div class="container header-container open"> -->
    <div class="container header-container ">

      <div class="logo" style="grid-area: logo;">
        <div id="logoImgBox">
          <img src="./images/logo.png" alt="" />
        </div>
      </div>
      <div class="websiteName" style="grid-area: websiteName;text-align: center;">经方查阅器</div>

      <nav style="grid-area: nav;">
        <a class="active" href="#shangHan" data-section="shangHan">伤寒论</a>
        <a href="#jinGui" data-section="jinGui">金匮要略</a>
        <a href="#yiAn" data-section="yiAn">医案</a>
        <a href="#yiYao" data-section="yiYao">医药</a>
        <a href="#gengDuo" data-section="gengDuo">更多</a>
        <!-- 修改搜索框结构 -->
        <div class="search-container" data-section="search">
          <input type="search" id="searchInp" placeholder="搜索..." />
        </div>
      </nav>
      <!-- 折叠 按钮 -->
      <div class="burger" style="grid-area: burger;">
        <div class="burger-line1"></div>
        <div class="burger-line2"></div>
        <div class="burger-line3"></div>
      </div>
    </div>
  </header>
  <main>
    <div class="container main-container">
      <!-- 伤寒论 -->
      <section id="shangHan" class="displayBlock">
        <div class="tiaoWenBox">
          <!-- 左边 -->
          <div class="left-container " section-id="shangHan">
            <ul id="shangHanChapterList">
              <!-- <li>
                辨太阳病脉证并治台台台台台台台台台台台台台台台台台台台台台台台台
              </li>
              <li>辨太阳病脉证并治台 (上)</li>               -->
            </ul>
          </div>
          <!-- 右边 -->
          <div class="right-container">
            <div class="tiaoWen" id="shangHanTiaoWenBox">
              <div class="tiaoWen-section">
                <div class="tiaoWen-title">辨太阳病脉证并治1</div>
                <div class="tiaoWen-content">
                  <div class="tiaoWen-content-item">
                    <span class="number"></span>
                    <span class="content">
                      太阳之为病，脉浮，头项强痛而恶寒。
                      太阳之为病，脉浮，头项强痛而恶寒。
                      太阳之为病，脉浮，头项强痛而恶寒。
                      太阳之为病，脉浮，头项强痛而恶寒。
                    </span>
                  </div>
                  <div class="tiaoWen-content-item">
                    <span class="number"></span>
                    <span class="content">太阳之为病，脉浮，头项强痛而恶寒。</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>
      <!-- 金匮要略 -->
      <section id="jinGui">
        <div class="tiaoWenBox">
          <!-- 左边 -->
          <div class="left-container " section-id="jinGui">
            <ul id="jinGuiChapterList">
              <!-- <li>
                辨太阳病脉证并治台台台台台台台台台台台台台台台台台台台台台台台台
              </li>
              <li>辨太阳病脉证并治台 (上)</li>               -->
            </ul>
          </div>
          <!-- 右边 -->
          <div class="right-container">
            <div class="tiaoWen" id="jinGuiTiaoWenBox">
              <div class="tiaoWen-section">
                <div class="tiaoWen-title">金匮要略1 脏腑经络先后病</div>
                <div class="tiaoWen-content">
                  <div class="tiaoWen-content-item">
                    <span class="number"></span>
                    <span class="content">
                      <!-- 问曰：上工治未病，何也？师曰：夫治未病者，见肝之病，知肝传脾，当先实脾。四季脾旺不受邪，即勿补之。中工不晓相传，见肝之病，不解实脾，惟治肝也。夫肝之病，补用酸，助用焦苦，益用甘味之药调之。酸入肝，焦苦入心，甘入脾。脾能伤肾，肾气微弱，则水不行；水不行，则心火气盛，俞桥本，赵开美本，更有心火气盛四字。则伤肺；肺被伤，则金气不行；金气不行，则肝气盛。俞本有故实脾三字，则肝自愈。此治肝补脾之要妙也。肝虚则用此法，实则不在用之。经曰：虚虚实实，补不足，损有余。是其义也。余脏准此。 -->
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 医案 -->
      <section id="yiAn">
        <div class="container">
          <!-- 左边 -->
          <div class="left-container ">
            <div class="title">名医列表</div>
            <div class="list-container active">
              <div class="list-item">
                <div class="item-img">
                  <img src="./images/userIMG/hxs.png" alt="">
                </div>
                <div class="item-info">
                  <div class="item-title">胡希恕</div>
                  <div class="item-position">医生</div>
                </div>
              </div>
            </div>
            <div class="list-container">
              <div class="list-item">
                <div class="item-img">
                  <img src="./images/userIMG/hxs.png" alt="">
                </div>
                <div class="item-info">
                  <div class="item-title">胡希恕</div>
                  <div class="item-position">医生</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右边 -->
          <div class="right-container" id="yiAnMedicalRecordsBox">
            <h2 class="tite">胡希恕医案</h2>
            <div class="filter-btns">
              <button class="filter-btn active" data-filter="*">全部</button>
              <button class="filter-btn" data-filter=".web">WEB</button>
              <button class="filter-btn" data-filter=".mobile">移动</button>
              <button class="filter-btn" data-filter=".science">科研</button>
            </div>
            <div class="cases">
              <!-- 属于web和科研 -->
              <div class="case-item web science">
                web 科研
              </div>
              <div class="case-item web science">
                web 科研
              </div>
              <div class="case-item web">
                web
              </div>
              <div class="case-item mobile">
                移动
              </div>
              <div class="case-item science mobile">
                移动 科研
              </div>
              <div class="case-item science">
                科研
              </div>
              <div class="case-item science mobile">
                科研 移动
              </div>
              <div class="case-item web science">
                web 科研
              </div>
            </div>

          </div>
        </div>

      </section>
      <!-- 医药 -->
      <section id="yiYao">医药</section>
      <!-- 更多 -->
      <section id="gengDuo">
        <div class="card">
          <h3>汉制单位</h3>
          <div class="card-content">
            <div class="card-content-item">
              <!-- 表格 -->
              <table border="1" cellspacing="0" cellpadding="12px" bordercolor="red" align="center">
                <thead>
                  <!-- 第一行 -->
                  <tr> <!-- 第一列 -->
                    <th>汉制</th>
                    <!-- 第二列 -->
                    <th>现代</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 第二行 -->
                  <tr>
                    <td>一两</td>
                    <td>≈15.625克</td>
                  </tr>
                  <!-- 第三行 -->
                  <tr>
                    <td>一两</td>
                    <td>24铢</td>
                  </tr>
                  <tr>
                    <td>一铢</td>
                    <td>0.65克</td>
                  </tr>
                  <tr>
                    <td>一升</td>
                    <td>≈200毫升</td>
                  </tr>
                  <tr>
                    <td>一合</td>
                    <td>20毫升</td>
                  </tr>
                  <tr>
                    <td>杏仁一枚</td>
                    <td>≈0.4克</td>
                  </tr>
                  <tr>
                    <td>1石=4钧</td>
                    <td>29760克</td>
                  </tr>
                  <tr>
                    <td>1钧=30斤</td>
                    <td>7440克</td>
                  </tr>
                  <tr>
                    <td>1斤</td>
                    <td>248克</td>
                  </tr>
                  <tr>
                    <td>1斤</td>
                    <td>16两</td>
                  </tr>
                  <tr>
                    <td>1两</td>
                    <td>15.625克</td>
                  </tr>
                  <tr>
                    <td>1两</td>
                    <td>24铢</td>
                  </tr>
                  <tr>
                    <td>1斤</td>
                    <td>液体250毫升</td>
                  </tr>
                  <tr>
                    <td>1合</td>
                    <td>20毫升</td>
                  </tr>
                  <tr>
                    <td>1圭</td>
                    <td>0.5克</td>
                  </tr>
                  <tr>
                    <td>1龠</td>
                    <td>10毫升</td>
                  </tr>
                  <tr>
                    <td>1撮</td>
                    <td>2克</td>
                  </tr>
                  <tr>
                    <td>1方寸匕</td>
                    <td>金石类2.74克</td>
                  </tr>
                  <tr>
                    <td>1方寸匕</td>
                    <td>药未约2克</td>
                  </tr>
                  <tr>
                    <td>1方寸匕</td>
                    <td>草木类药未约1克</td>
                  </tr>
                  <tr>
                    <td>半方寸匕=1刀圭=1钱匕</td>
                    <td>1.5克</td>
                  </tr>
                  <tr>
                    <td>1钱匕</td>
                    <td>1.5-1.8克</td>
                  </tr>
                  <tr>
                    <td>1铢</td>
                    <td>100个黍米的重量</td>
                  </tr>
                  <tr>
                    <td>1分</td>
                    <td>3.9-4.2克</td>
                  </tr>
                  <tr>
                    <td>梧桐子</td>
                    <td>≈黄豆大</td>
                  </tr>
                  <tr>
                    <td>蜀椒一升</td>
                    <td>=50克</td>
                  </tr>
                  <tr>
                    <td>葶力子一升</td>
                    <td>60克</td>
                  </tr>

                </tbody>
              </table>
            </div>
            <div class="card-content-item">
              <!-- 表格 -->
              <table border="1" cellspacing="0" cellpadding="12px" bordercolor="red" align="center">
                <thead>
                  <!-- 第一行 -->
                  <tr> <!-- 第一列 -->
                    <th>汉制</th>
                    <!-- 第二列 -->
                    <th>现代</th>
                  </tr>
                </thead>
                <tbody>
                  <td>葶力子一升</td>
                  <td>60克</td>
                  </tr>
                  <tr>
                    <td>吴茱萸一升</td>
                    <td>50克</td>
                  </tr>
                  <tr>
                    <td>五味子一升</td>
                    <td>50克</td>
                  </tr>
                  <tr>
                    <td>半夏一升</td>
                    <td>130克</td>
                  </tr>
                  <tr>
                    <td>蛇虫一升</td>
                    <td>16克</td>
                  </tr>
                  <tr>
                    <td>附子大者1枚</td>
                    <td>20-30克</td>
                  </tr>
                  <tr>
                    <td>附子中者1枚</td>
                    <td>15克</td>
                  </tr>
                  <tr>
                    <td>强乌头1枚小者</td>
                    <td>3克</td>
                  </tr>
                  <tr>
                    <td>强乌头1枚大者</td>
                    <td>5-6克</td>
                  </tr>
                  <tr>
                    <td>杏仁大者10枚</td>
                    <td>4克</td>
                  </tr>
                  <tr>
                    <td>栀子10枚</td>
                    <td>平均15克</td>
                  </tr>
                  <tr>
                    <td>瓜萎大小平均1枚</td>
                    <td>46克</td>
                  </tr>
                  <tr>
                    <td>积实1枚</td>
                    <td>约14.4克</td>
                  </tr>
                  <tr>
                    <td>石膏鸡蛋大1枚</td>
                    <td>约40克</td>
                  </tr>
                  <tr>
                    <td>石厚朴1尺</td>
                    <td>约30克</td>
                  </tr>
                  <tr>
                    <td>竹叶一握</td>
                    <td>约12克</td>
                  </tr>
                  <tr>
                    <td>1斛=10斗</td>
                    <td>20000毫升</td>
                  </tr>
                  <tr>
                    <td>1斗=10升</td>
                    <td>2000毫升</td>
                  </tr>
                  <tr>
                    <td>1升=10合</td>
                    <td>200毫升</td>
                  </tr>
                  <tr>
                    <td>1合=2禽</td>
                    <td>20毫升</td>
                  </tr>
                  <tr>
                    <td>1俞=5撮</td>
                    <td>10毫升</td>
                  </tr>
                  <tr>
                    <td>1撮=4圭</td>
                    <td>2毫升</td>
                  </tr>
                  <tr>
                    <td>1圭</td>
                    <td>0.5毫升</td>
                  </tr>
                  <tr>
                    <td>1引=10丈</td>
                    <td>2310厘米</td>
                  </tr>
                  <tr>
                    <td>1丈=10尺</td>
                    <td>231厘米</td>
                  </tr>
                  <tr>
                    <td>1尺=10分</td>
                    <td>2.31厘米</td>
                  </tr>
                  <tr>
                    <td>1分</td>
                    <td>0.231厘米</td>
                  </tr>

                </tbody>
              </table>
            </div>
          </div>

        </div>
      </section>
      <!-- 搜索 -->
      <section id="search">
        <div class="no-results"><i class="fas fa-search"></i>输入方剂名或关键字进行搜索!</div>
      </section>
    </div>
    <!-- 控制left-container 显示/隐藏 -->
    <div class="display-hide-left-container">
      <div class="display-hide-left-container-box">
        <i class="fa fa-solid fa-angle-left display"></i>
        <i class="fa fa-solid fa-angle-right "></i>
      </div>
    </div>
  </main>
  <!-- 低部 -->
  <footer>
    <div class="container footer-container">
      <div class="footer-item-title">
        备案号：鄂ICP备123456789号 | Copyright © 2025 www.abc.com All Rights
        Reserved.
      </div>
    </div>
  </footer>


  <!-- 摸板引擎模板 条文解释弹窗-->
  <script id="tiaoWenJieShiTP" type="text/html">
    <div id="tiaoWenJieShi-popup" class="popup">
      <div class="popup-content">
        <div class="popup-title">
          <div class="popup-title-name">名家解释</div>
          <div class="popup-title-close tiaoWenClose"><i class="fas fa-solid fa-xmark"></i></div>
        </div>
        <div class="popup-header">
          <fieldset>
            <legend>条文</legend>
            <div class="popup-content-item-tiaoWenJieShiS">
              {{tiaoWenContent}}
            </div>
          </fieldset>
        </div>
        <div class="popup-main">
          {{each mingJiaJieShi}}
          <div class="popup-content-item">
            <div class="popup-content-item-fanJi">
              <fieldset>
                <legend>{{$value.mingJiaName}}</legend>
                {{if $value.content.length == 0}}
                  <div class="popup-content-item-tiaoWenJieShi">暂无</div>
                {{else }}
                  {{each $value.content}}
                  <div class="popup-content-item-tiaoWenJieShi">
                    {{$value}}
                  </div>
                  {{/each}}
                {{/if}}
              </fieldset>
            </div>
          </div>
         {{/each}}
  
        </div>
      </div>
    </div>
   </script>
  <!-- 摸板引擎模板 方剂弹窗-->
  <script id="fangJiTP" type="text/html">
    <div id="fangJi-popup" class="popup">
        <div class="popup-content">
            <div class="popup-title">
                <div class="popup-title-name">{{fanJiName}}</div>
                <div class="popup-title-close fanJiClose"  ><i class="fas fa-solid fa-xmark"></i></div>
            </div>
            <div class="popup-main">
              {{if shangHanIs == undefined}}
              <div class="popup-content-item">
                <div class="popup-content-item-title">伤寒方</div>
                <div class="popup-content-item-fanJi">
                  <fieldset>
                    <legend>{{fanJiName}} {{if count !==""}} <span>({{count}}味)</span> {{/if}} </legend>
                    <div class="popup-content-item-fans">
                      {{each yao}}
                      <div class="popup-content-item-fan">{{$value.name}} <span class="popup-content-item-ji">{{$value. jiLiang}}</span> </div>                 
                      {{/each}}
                    </div>
                  
                  </fieldset>
                </div>
                <div class="popup-content-item-notes">
                  <fieldset>
                    <legend>用法</legend>
                    <div class="popup-content-item-notes-text">
                      {{yongFa}}
                    </div>
                  </fieldset>
                </div>
              </div>
              {{/if}}
              {{if jinGuiIs !== '无'}}
              <div class="popup-content-item">
                <div class="popup-content-item-title">金匮方</div>
                <div class="popup-content-item-fanJi">
                  <fieldset>
                    <legend>{{jinGuiFanJiName}}<span>({{jinGuiCoun}}味)</span></legend>                     
                  <div class="popup-content-item-fans">
                    {{each jinGuiYao}}
                    <div class="popup-content-item-fan">{{$value.name}} <span class="popup-content-item-ji">{{$value. jiLiang}}</span> </div>                 
                    {{/each}}
                  </fieldset>
                </div>
                <div class="popup-content-item-notes">
                  <fieldset>
                    <legend>用法</legend>
                    <div class="popup-content-item-notes-text">{{jinGuiYongFa}}</div>
                  </fieldset>  
                </div>
              </div>
              {{/if}}
              <div class="popup-content-item">
                <div class="popup-content-item-title">相关条文</div>
                {{each tiaoWen}}
                <fieldset>
                  <legend>{{$value.title}}</legend>
                  {{each $value.tiaoWen2}}
                    <div class="popup-content-item-tiaoWenText">{{$value.val}}</div>
                   {{/each}}
                </fieldset>   
                {{/each}}         
              </div>
            </div>
        </div>
    </div>
   </script>
  <!-- 摸板引擎模板 伤寒/金匮章节列表-->
  <script id="chapterListTP" type="text/html">
    <div class="title">章节列表</div>
      {{each titles}}
      <li data-target="{{$value.key}}">
        <a href="#{{$value.key}}" title="{{$value.title}}"> {{$value.title}}</a>
      </li>
      {{/each}}
    </script>
  <!-- 摸板引擎模板 伤寒/金匮条文数据-->
  <script id="tiaoWenTP" type="text/html">
      {{each tiaoWens item}}
      <div class="tiaoWen-section" id="{{item.key}}">
        <div class="tiaoWen-title" data-id="{{item.key}}">{{item.title}}</div>
        <div class="tiaoWen-content">
          {{each item.content}}
          <div class="tiaoWen-content-item" id="{{item.key}}-{{$value.number}}">
            <span class="number">
              <!-- 修改判断条件为检查小数 -->
              {{if !$value.number.toString().match(/\..+/)}}
              <span>{{$value.number}}、</span>
              {{else}}
              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              {{/if}}
             </span>
            <span class="content">{{@$value.text}}</span>
          </div>
          {{/each}}
        </div>
      </div>
      {{/each}}
    </script>
  <!-- 搜索页 搜索页章节列表-->
  <script id="searchChapterListTP" type="text/html">
    <div class="title">章节列表</div>
      {{each titles}}
      <li data-target="search_{{$value.key}}">
        <a href="#search_{{$value.key}}" title="{{$value.title}}"> {{$value.title}}</a>
      </li>
      {{/each}}
  </script>
  <!-- 搜索页 搜索页条文数据-->
  <script id="searchTiaoWenTP" type="text/html">
      {{each tiaoWens item}}
      <div class="tiaoWen-section" id="search_{{item.key}}">
        <div class="tiaoWen-title" data-id="search_{{item.key}}">{{item.title}}</div>
        <div class="tiaoWen-content">
          {{each item.content}}
          <div class="tiaoWen-content-item" id="{{item.key}}-{{$value.number}}">
            <span class="number">
               <!-- 修改判断条件为检查小数 -->
               {{if !$value.number.toString().match(/\..+/)}}
               <span>{{$value.number}}、</span>
               {{else}}
               <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
               {{/if}}
            </span>
            <span class="content">{{@$value.text}}</span>
            <div class="returnOriginalPlaceBox">
              <span class="returnOriginalPlace" data-id="{{item.key}}-{{$value.number}}">返回原文</span>
            </div>
          </div>
          {{/each}}
        </div>
      </div>
      {{/each}}
    </script>
  <script src="./libs/isotope/isotope.pkgd.min.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>